<template>
  <div class="app-container">
    <!-- 侧边栏 -->
    <Nav
      :sidebar-collapsed="sidebarCollapsed"
      @toggle-sidebar="toggleSidebar"
    />

    <!-- 主要内容区域 -->
    <div class="main-container">
      <!-- 头部导航 -->
      <Header
        :sidebar-collapsed="sidebarCollapsed"
        @toggle-sidebar="toggleSidebar"
      />

      <!-- 内容区域 -->
      <el-main class="content-wrapper">
        <!-- 路由视图 -->
        <router-view />
      </el-main>
    </div>
  </div>
</template>

<script>
// 导入组件
import Nav from '@/components/Nav.vue'
import Header from '@/components/Header.vue'

export default {
  name: 'HomeView',
  components: {
    Nav,
    Header
  },
  data() {
    return {
      sidebarCollapsed: false, // 侧边栏折叠状态
      isLoggedIn: false,
      userRole: ''
    }
  },
  watch: {
    // 监听路由变化
    $route() {
      // 检查登录状态
      this.checkLoginStatus()
    }
  },
  mounted() {
    // 初始检查登录状态
    this.checkLoginStatus()
  },
  methods: {
    // 切换侧边栏折叠状态
    toggleSidebar() {
      this.sidebarCollapsed = !this.sidebarCollapsed
    },
    // 检查登录状态
    checkLoginStatus() {
      try {
        const userInfo = localStorage.getItem('userInfo')
        if (userInfo) {
          const parsedUserInfo = JSON.parse(userInfo)
          this.isLoggedIn = true
          this.userRole = parsedUserInfo.role || ''
        } else {
          this.isLoggedIn = false
          this.userRole = ''
        }
      } catch (error) {
        console.error('解析用户信息失败:', error)
        this.isLoggedIn = false
        this.userRole = ''
      }
    }
  }
}
</script>

<style scoped>
/* 应用容器样式 */
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* 主要内容容器样式 */
.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 内容区域样式 */
.content-wrapper {
  flex: 1;
  padding: 0;
  background-color: #ffffff;
  overflow-y: auto;
  position: relative;
}

/* 滚动条样式 */
.content-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.content-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.content-wrapper::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.content-wrapper::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }
}
</style>
